<template>
  <view class="pdf-preview">
      <view v-if="showCollects" class="show_collect_like">
          <image class="like" @click="likeFn(info)"
                 :src="info.like === 1 ? '../static/images/home/heart_fill.png' : '../static/images/home/heart.png'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.likeNumber" class="likeNumber">{{ info.likeNumber }}</text>
          <image class="collection" @click="collectionFn(info)"
                 :src="info.collect === 1 ? '../static/images/start1.svg' : '../static/images/start.svg'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.collectNumber" class="collectNumber">{{ info.collectNumber }}</text>
      </view>
    
      <zmm-watermark :watermark="watermark" :margin="40"></zmm-watermark>
    
      <image v-if="search" src="../static/images/home/open.svg" class="icon" @click="rightPopup"></image>
      <u-popup :show="show" mode="right" @close="closeFn" @open="openFn" class="keywords">
          <view class="keyword">
              <view class="image">
                  <image src="../static/images/home/close.svg" @click="closeFn"></image>
              </view>
              <view class="content">
                  <view class="model model-title">
                      <image src="../static/images/home/model-title.svg"></image>
                      关键字列表
                  </view>
            <view class="scroll_view">
                <view :class="knowledgeIndex == index ? 'active' : ''" class="model" @click="knowledgeFn(item, index)" v-for="(item, index) in items" :key="index"> <image src="../static/images/home/model.svg"></image>{{ item.text }} </view>
            </view>
        </view>
      </view>
    </u-popup>

    <!-- 检索结果后处理的问题 -->
    <view v-show="highlightedContent != ''" v-html="highlightedContent"></view>
    <view v-show="highlightedContent == ''" class="mainContent">
      <template v-for="(item, index) in dataInfo.content">
        <view class="h0" v-if="item.tag == 'h0'">
          <view class="title">{{ item.paragraphs[item.paragraphs.length - 1] }}</view>
        </view>
        <view class="h1" v-if="item.tag == 'h1'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'">
              {{ filterFn(item.paragraphs[H.node_index]) }}
            </view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" v-show="item.images[H.node_index].remote_content" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
        <view class="h2" v-if="item.tag == 'h2'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h3" v-if="item.tag == 'h3'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h4" v-if="item.tag == 'h4'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h5" v-if="item.tag == 'h5'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>

        <view class="h6" v-if="item.tag == 'h6'">
          <view class="title">{{ item.text }}</view>
          <view v-for="(H, I) in item.node_order_index" :key="I">
            <view class="content text text-indent" v-if="H.node_type == 'paragraph'"> {{ filterFn(item.paragraphs[H.node_index]) }}</view>
            <view class="content" v-if="H.node_type == 'ordered_list'">
              <view class="ordered_list" v-for="(S, Inx) in item.ordered_lists[H.node_index].content" :key="Inx">
                <text>{{ Inx + 1 }}.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view class="content" v-if="H.node_type == 'unordered_list'">
              <view class="unordered_list" v-for="(S, Inx) in item.unordered_lists[H.node_index].content" :key="Inx">
                <text class="titles">.</text>
                <text>{{ S }}</text>
              </view>
            </view>
            <view v-if="H.node_type == 'image'">
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].pre_node_content && item.images[H.node_index].pre_node_content.startsWith('表') && (!item.images[H.node_index].next_node_content || (item.images[H.node_index].next_node_content && !item.images[H.node_index].next_node_content.startsWith('图')))">{{ imageContents(item.images[H.node_index].pre_node_content) }}</text>
              <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.images[H.node_index].remote_content)" :src="$config.baseUrl + item.images[H.node_index].remote_content"></image>
              <text class="legend" v-if="item.images[H.node_index] && item.images[H.node_index].next_node_content && item.images[H.node_index].next_node_content.startsWith('图')">{{ imageContents(item.images[H.node_index].next_node_content) }}</text>
            </view>
            <view class="table" v-if="H.node_type == 'table'">
              <text class="legend" v-if="item.tables[H.node_index]">{{ imageContents(item.tables[H.node_index].pre_node_content) }}</text>
              <view class="table_content" v-html="item.tables[H.node_index].content"></view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "preview",
  data() {
    return {
        show: false,
        showCollects: true,
        knowledgeIndex: -1,
        info: {},
        isSearch: false,
        QA: false,
        html: null,
        items: [],
        search: true,
        keywords: [],
        dataInfo: {},
        albumWidth: 0,
      urls1: [
        {
          src2: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
      ],
      highlightedContent: "",
        watermark: this.$store.state.user.id + this.$store.state.user.name
    };
  },
  onLoad(options) {
    console.log(this.$config.baseUrl,'ffffffffff总的地址')
	console.log(JSON.parse(options.info), "查看进入的参数");
	// return
    // this.info = JSON.parse(decodeURIComponent(options.info));
    this.info = JSON.parse(options.info);
	if(this.info){
		this.info.like = 0
		this.info.likeNumber = 0
		this.info.collectNumber = 0
		this.info.collect = 0
	}
    
      this.isSearch = options.isSearch
      this.showCollects = !options.showCollects
      this.search = options.search == 'true' ? true : false
    if (this.search == true) {
      this.items = this.info.ext.items.filter((word) => word.chunk_type.includes("paragraph"));
      this.keywords = this.info.ext.items[0].text.split(",");
      this.knowledgeIndex = 0;

    }
    console.log(options.search, this.info, "ffffff");
    this.QA = options.QA;
    this.getPreview();
  },
  computed: {
    // 过滤正文关键字数据
    filterFn() {
      return (params) => {
        const regex1 = /^图(\d+|\s*)/g;
        const regex2 = /^表(\d+|\s*)/g;

        if (regex1.test(params) || regex2.test(params)) {
          return;
        } else {
          return params;
        }
      };
    },
    imageContents() {
      return (item, index) => {
        // const i = index + 1
        // const regex1 = /^图\s/i;
        // const regex2 = /^表\s/i;
        // if (regex1.test(item)) {
        // 	return item.replaceAll('图 ', '图' + i);
        // }
        // if (regex2.test(item)) {
        // 	return item.replaceAll('表 ', '表' + i);
        // }
        return item;
      };
    },
    workflowHeight() {
      let height = document.documentElement.clientHeight || document.body.clientWidth;
      height = (height - 46) * 2;
      return {
        height: height + "rpx",
      };
    },
  },
  mounted() {},
  methods: {
    keywordsFn() {
      const pageContent = document.querySelector(".mainContent").innerHTML;
      // console.log("查看对应文本", pageContent.indexOf('顺序1'))
      this.keywordIndex = pageContent.indexOf(this.keywords);

      const regex = new RegExp(this.keywords, "g");
      this.highlightedContent = pageContent.replace(regex, (match) => {
        return `<uni-text class="highlight" style="color:#008fff">${match}</uni-text>`;
      });
      setTimeout(() => {
        document.querySelector(".text_image").onclick = (e) => {
          this.previewImage(e.target.src);
        };
      }, 2000);
      console.log(this.highlightedContent, "fffff");
      if (this.keywordIndex !== -1) {
        this.scrollToKeyword();
      }
    },
    scrollToKeyword() {
      this.$nextTick(() => {
        const element = document.querySelector(".highlight");

        console.log("666666", element);
        if (element) {
          element.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      });
    },
    rightPopup() {
      console.log("ffff");
      this.show = true;
    },
    closeFn() {
      this.show = false;
    },
    openFn() {
      // this.show = false
    },
    knowledgeFn(item, index) {
      this.knowledgeIndex = index;
      this.keywords = item.text.split(",")[0];
      this.keywordsFn();
      console.log("knowledge", this.keywords, index);
    },
    previewImage(url) {
      uni.previewImage({
        current: 0, // 当前显示图片的索引
        urls: [url], // 需要预览的图片列表
      });
    },
    collectionFn(item) {
      let url = item.collect === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$toast("取消收藏");
          this.info.collect = 0
            this.info.collectNumber--
        } else {
            this.$toast('已收藏')
            this.info.collect = 1
            this.info.collectNumber++
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    likeFn(item) {
      let url = item.like === 1 ? "/knowledgeCollect/delete    " : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "1",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.like === 1) {
          this.$toast("取消点赞");
            this.info.like = 0
            this.info.likeNumber--
        } else {
          this.$toast("已点赞");
            this.info.like = 1
            this.info.likeNumber++
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    getPreview() {
      this.$modal.loading("正在加载中···");
      let that = this;
      this.$request({
        url: "/knowledgeData/getJson", //    this.QA ? '/file/getUrl' : '/knowledgeData/preview'
        method: "get",
        params: {
          id: this.info.id,
        },
      }).then(({ data }) => {
        if(!data.readAuthority){
          this.$toast("当前文件未发布，不可预览")
          return
        }
        if (this.search) {
          setTimeout(()=> {
            this.$nextTick(()=>{
              this.knowledgeFn(this.info.ext.items[0], 0);
            })
          }, data.fileSize < 2 ? 2000  : data.fileSize * 1000)
        }
        this.dataInfo = JSON.parse(data.videoJson);
        console.log( this.dataInfo ,"=====这里是文件预览的内容")
        this.$modal.closeLoading();
        this.$request({
          url:'/knowledgeData/addView',
          method:'post',
          data:{
            id: this.info.id,
          }
        }).then(({ data })=> {
          this.info.like = data.like
          this.info.likeNumber = data.likeNumber
          this.info.collectNumber = data.collectNumber
          this.info.collect = data.collect
        })
      });
    },

  },
};
</script>

<style lang="scss" scoped>


// .mainContent {
//   counter-reset: h1-counter h2-counter;
// }

// .h1 {
//   counter-increment: h1-counter;
//   counter-reset: h2-counter;
// }

// .h2 {
//   counter-increment: h2-counter;
// }

// .h1 .title::before {
//   content: counter(h1-counter) ": ";
// }

// .h2 .title::before {
//   content: counter(h1-counter) "." counter(h2-counter) " ";
// }

.image {
  width: 100%;
  margin: 20rpx 0 0;
}

.legend {
  color: #4c5a67;
  display: flex;
  justify-content: center;
}

.pdf-preview {
  padding: 20rpx;
  background: #fff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  ::v-deep .u-popup__content {
    background: transparent;
  }
  // 设置所有正文的行号
  .content_model {
    line-height: 48rpx;
    color: #1c2126;
    font-size: 30rpx;
  }
  .text-indent {
    text-indent: 2em;
  }
  .h0 {
    .title {
      font-size: 36rpx;
      font-weight: 550;
      color: #1c2126;
      text-align: center;
    }
  }

  .h1 {
    .title {
      font-size: 33rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }
    .content {
      // text-indent: 2em;
    }
  }

  .h2 {
    .title {
      font-size: 30rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }
    .content {
      // text-indent: 2em;
    }
  }

  .h3,
  .h4,
  .h5,
  .h6 {
    .title {
      font-size: 29rpx;
      font-weight: 550;
      color: #1c2126;
      padding: 40rpx 0 20rpx;
    }
  }
}

::v-deep p {
  line-height: 40rpx !important;
  font-size: 26rpx !important;
  font-weight: 400;
  padding: 10rpx;
  text-align: center;
}

// ::v-deep p:nth-child(1) {
// 	font-size: 36rpx;
// 	font-weight: 550;
// 	padding: 30rpx;
// 	text-align: center;
// }

::v-deep img {
  width: 94.5vw;
  // height: 940rpx;
  // margin-left: 25vw;
  //padding: 20rpx 0;
}

::v-deep table {
  border-collapse: collapse;
  /* 合并单元格边框 */
  overflow-x: scroll;
  margin: 20rpx 0 40rpx;
}

::v-deep tr {
  width: auto;
  border: 1px solid #dcdee1;
  /* 设置单元格边框 */
  padding: 8rpx;
  /* 设置单元格内边距 */
}

::v-deep td {
  width: auto;
  border: 1px solid #dcdee1;
  /* 设置单元格边框 */
  padding: 10rpx;
  /* 设置单元格内边距 */
  color: #1c2126;
  font-size: 24rpx;
  background: #f9fbfc;
  word-wrap: break-word;
}

::v-deep th {
  background: #eaecef;
  color: #1c2126;
  font-size: 28rpx;
  border: none;
}

// ::v-deep tr td:nth-child(1){
// 	font-size: 28rpx;
// 	font-size: 500;
// 	// width: 140rpx;
// 	display: block;
// 	background: #EAECEF;
// 	color: #1C2126;
// 	border: none;
// 	}

::v-deep td p {
  font-size: 28rpx;
}

.model {
  width: 434rpx;
  min-height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  padding: 0 24rpx;
  font-family: 思源黑体;
  font-size: 30rpx;
  word-break: break-all;
  text-align: justify;
  //margin: 24rpx;
  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
    min-width: 32rpx;
  }
  &.model-title {
    position: relative;
    color: #0084ff;
    //border-bottom: 1rpx solid #D8D8D8;
    &:before {
      content: "";
      width: calc(100% - 48rpx);
      height: 1rpx;
      position: absolute;
      left: 24rpx;
      right: 24rpx;
      bottom: 0;
      background: #d8d8d8;
    }
    &:hover {
      background: #ffffff;
    }
  }

  &.active {
    background: #e8f8ff;
  }
  &:hover {
    background: #e8f8ff;
  }
}

.icon {
  position: fixed;
  right: 0;
  top: calc(50% - 83rpx);
  z-index: 999;
  width: 56rpx;
  height: 166rpx;
}
.scroll_view{
    height: calc(100vh - 80rpx);
    overflow-y: auto;
}
.keyword {
  display: grid;
  grid-template-columns: 56rpx 1fr;
  width: 100%;
  height: 100%;
  view.image {
    width: 56rpx;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  view.content {
    background: #ffffff;
  }
}
</style>
